{% extends "templates/base.phtml" %}
{%block content%}
{% if wxc is defined %}
<div class="page-content-wrap">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default tabs">
                {%include 'include/wx_tabs' with ['action':action]%}
                <div class="panel-body tab-content">
                    <div class="tab-pane active">
                        <div class="col-md-12">
                            <h3>接口配置</h3>
                            <h5>URL:   {{url}}</h5>
                            <h5>TOKEN:   {{token}}</h5>

                            <h3>总运营数据</h3>

                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="col-md-3 data-detail">
                                        <p><label>图文总数：&nbsp;</label><span>{{imgcount}}</span></p>
                                        <p><label>文本总数：&nbsp;</label><span>{{textcount}}</span></p>
                                        <p><label>图文点击数量：&nbsp;</label><span>{{count}}</span></p>
                                    </div>
                                    <div class="col-md-9">
                                        <h4 style="text-align: center">最近一周一览表</h4>

                                        <div id="morris-bar-example" style="height: 300px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <h3>最近一周运营数据表</h3>

                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>自定义菜单点击量</th>
                                        <th>分享量</th>
                                        <th>互动量</th>
                                        <th>关注量</th>
                                        <th>取消关注量</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="active">
                                        <td>1月7日</td>
                                        <td>100</td>
                                        <td>100</td>
                                        <td>100</td>
                                        <td>100</td>
                                        <td>100</td>
                                    </tr>
                                    <tr class="info">
                                        <td>1月7日</td>
                                        <td>100</td>
                                        <td>100</td>
                                        <td>100</td>
                                        <td>100</td>
                                        <td>100</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endif%}
{%endblock%}{%block end%}
<style type="text/css">
    .user-info-penal p {
        padding-top: 0.6em;
    }

    .data-detail {
        padding-top: 3em;
    }

    table th, table td {
        text-align: center;
    }
</style>
<script type="application/javascript">
    $(document).ready(function () {
        //绘制柱形图脚本
        var morrisCharts = function () {
            Morris.Bar({
                element: 'morris-bar-example',
                data: [
                    {y: '周一', a: 20, b: 60, c: 40},
                    {y: '周二', a: 30, b: 35, c: 50},
                    {y: '周三', a: 50, b: 60, c: 80},
                    {y: '周四', a: 75, b: 60, c: 80},
                    {y: '周五', a: 80, b: 100, c: 83},
                    {y: '周五', a: 60, b: 90, c: 80},
                    {y: '周六', a: 70, b: 120, c: 80},
                    {y: '周日', a: 90, b: 180, c: 100}
                ],
                xkey: 'y',
                ykeys: ['a', 'b', 'c'],
                labels: ['业务一', '业务二', '业务三'],
                barColors: ['#B64645', '#33414E', '#95B75D']
            });
        }();
    });
</script>
{%endblock%}